<template>
	<view v-if="info.id">
		<u-swiper :list="info.images" height="500"></u-swiper>
		
		
		<view style="background: #FF5D39;color: #fff;">
		
				<view class="u-flex-3 u-padding-30">
					<view class="u-flex u-row-between u-col-center" >
						<view class="u-font-weight">限量秒杀</view>
						<view>
							秒杀仅 ￥ <text style="font-size: 40rpx;">{{info.price}}</text> 
						</view>
					</view>
					<view class="u-flex u-row-between u-col-center u-margin-top-20">
						<view class="u-th-line">￥{{info.linePrice}}</view>
						<view>仅剩{{info.sku}}件</view>
					</view>
				</view>
				<!-- <view class="u-flex-1 time">
					<view class="" style="color: #AC4C0A;font-size: 32rpx;margin: 20rpx 0;">
						<u-icon name="clock-fill" color="#AC4C0A" size="32"></u-icon>
						<text class="u-margin-left-">限时秒杀</text></view>
					<u-count-down separator-size="24" separator-color="#fff" color="#fff" bg-color="#F09820" font-size='24':timestamp="timestamp"></u-count-down>
				</view> -->
		
		</view>
		
		<view class="u-padding-30" style="border-radius: 100rpx 100rpx 0 0;padding-top: 100rpx;">
			<view class="u-font-weight u-font-lg">{{info.goodsName}}</view>
			<view class="u-flex u-row-between u-margin-top-20">
				
			</view>
			<view class="$u-type-info u-margin-top-20 u-font-sm "><text
					class="u-margin-right-30">限量{{info.sku+info.total}}件</text><text>仅剩{{info.sku}}件</text></view>
		</view>

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>


		<view class="u-padding-30">
			<view class="u-text-center u-font-lg u-font-weight">产品参数</view>
			<view class="text" v-for="(item,index) in info.param" :key="index">
				<view class="left">{{item.name}}</view>
				<view class="right">{{item.value}}</view>
			</view>
		</view>

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>

		<view class="u-margin-top-20">
			<view class="u-text-center u-font-lg u-font-weight">商品详情</view>
			<view class="u-padding-20">
				<u-parse :html="info.detail"></u-parse>
			</view>
		</view>






		<view class="bottom u-flex">
			<view class="u-flex u-flex-1 u-row-around u-text-center">
				<view class="u-flex-1 " style="position: relative;">
					<u-icon name="share" size="40"></u-icon>
					<view style="font-size: 24rpx;">分享</view>
					<button open-type="share" class="custom-btn"></button>
				</view>
			</view>
			<view class="u-flex-2 u-text-center u-flex" @click="buy">
				<view class="btn u-flex-1 red">立即购买</view>
			</view>
		</view>




	</view>
</template>

<script>
	export default {

		data() {
			return {
				info: {},
				id: "",
timestamp:""
			}
		},
		onReady() {
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			this.jiazai()
		},
		onShow() {

		},
		methods: {
			jiazai() {
				this.$u.post('/index/goodsDetail', {
					goods_id: this.id
				}).then(res => {
					uni.setNavigationBarTitle({
						title:res.goodsName
					})
				    let nowstamp = Date.parse(new Date())/1000;
					let starttamp = res.start;
					this.timestamp=(starttamp-nowstamp);
					this.info = res;
					
				}).catch(err => {

				})
			},
			buy() {
					uni.navigateTo({
						url:"/pages/sure_book/index?id="+this.info.id
					})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		border-top: 1rpx solid #F1F1F1;
		background: #FFFFFF;

		.btn {

			color: #fff;
			height: 120rpx;
			line-height: 120rpx;
			font-size: 40rpx;

			&.blue {
				background: #818DFF;
			}

			&.red {
				background: #FF5D39;
			}
		}
	}

	.text {
		display: flex;
		padding: 10rpx 0;

		.left {
			width: 200rpx;
			color: #C2C2C2
		}

		.right {
			font-weight: bold;
		}
	}
	.time{
		background: #FFC42A;
		height: 170rpx;
		padding: 20rpx;
		font-size: 24rpx;
		text-align: center;
		
	}
</style>
